<template>
  <div
    class="bg_box"
    v-loading="loading"
    element-loading-text="免密登陆中，请稍等片刻"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="login-box">
      <div class="left-box">
        <div class="sys-logo"></div>
        <div class="sys-name">搞钱希望大平台</div>
        <div class="sys-enname">Specialized disease data research platform</div>
      </div>
      <div class="right-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="80px"
          class="login-ruleForm"
          hide-required-asterisk
          label-position="top"
          :show-message="false"
        >
          <div class="title">搞钱希望大平台</div>
          <el-form-item label="用户名" prop="userName" class="username">
            <el-input
              prefix-icon="el-icon-user"
              v-model="ruleForm.userName"
              type="text"
              placeholder="请输入登录账号"
              clearable
            ></el-input>
            <!-- <input type="text" v-model="ruleForm.username"> -->
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="ruleForm.passWord"
              type="password"
              autocomplete="off"
              placeholder="请输入登录密码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="subBtn">
            <el-button
              type="primary"
              @keydown.native="loginIn"
              @click="submitForm('ruleForm')"
              >登 录</el-button
            >
            <!-- <el-button type="primary" @click="submitSign('ruleForm')"
              >注 册</el-button
            > -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { autoLoginByToken } from "@/api/login";
export default {
  name: "",
  components: {},
  data() {
    return {
      loading: false,
      ruleForm: {
        userName: "123",
        passWord: "123",
      },
      rules: {
        userName: { required: true, message: "请输入用户名", trigger: "blur" },
        passWord: { required: true, message: "请输入密码", trigger: "blur" },
      },
      // bgImgUrl: require("@/assets/image/sysIcon.png"),
    };
  },
  computed: {},
  watch: {},
  created() {
    document.addEventListener("keydown", this.loginIn);
  },
  mounted() {
    let query = this.$route.query;
    if (query && query.token) {
      let token = query.token;
      //获取平台的用户名信息
      this.autoLogin(token);
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((vaild) => {
        let params = {
          ...this.ruleForm,
        };
        
        this.$store.dispatch("Login", params).then((res) => {
          this.$router.push({ path: "/home" });
          document.removeEventListener("keydown", this.loginIn);
        });
      });
    },
    loginIn(e) {
      if (e.key === "Enter") {
        this.submitForm();
      }
    },
    async autoLogin(token) {
      this.loading = true
      try {
         const res = await autoLoginByToken({ token });
          sessionStorage.setItem("token", `${res.token}`);
          setTimeout(() => {
            this.$router.push({ path: "/home" });
          }, 1000)
      } catch (error) {
        this.loading = false
        this.$message({
          type: 'error',
          message: '免密登录失败，请重试或手动登录'
        })
      }
     
      // let url =
      //   `${url_name_5}/provider/user/mapping?clientId=bk-zyy-api&token=${token}`;
      // axios
      //   .get(url)
      //   .then((res) => {
      //     if (res && res.data.code == 200) {
      //       let loginName = res.data.data.loginName;
      //       if (loginName) {
      //         this.ruleForm.userName = loginName;
      //         this.ruleForm.account = loginName;
      //         this.ruleForm.passWord = "123456";
      //         this.submitForm();
      //       } else {
      //         this.$message.error("获取用户登录账户异常，请联系管理员！");
      //       }
      //     } else {
      //       this.$message.error("获取用户登录账户异常，请联系管理员！");
      //     }
      //   });
    },
  },
};
</script>

<style scoped lang="less">
.bg_box {
  height: 100%;
  width: 100%;
  background-image: url("@/assets/images/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  .login-box {
    display: flex;
    width: 943px;
    height: 571px;
    background-image: url("@/assets/images/bg1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -285px;
    margin-left: -472px;
    .left-box {
      flex: 1;
      padding: 140px 55px;
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 471px;
        border-right: 2px dashed #999;
        position: absolute;
        right: 0%;
        top: 60px;
      }
      .sys-logo {
        width: 109px;
        height: 109px;
        margin: auto;
        background-image: url("@/assets/images/bg2.png");
      }
      .sys-name {
        font-size: 38px;
        text-align: center;
        color: #fff;
      }
      .sys-enname {
        font-size: 16px;
        text-align: center;
        color: #fff;
        margin-top: 5px;
      }
    }
    .right-box {
      width: 440px;
      padding: 140px 55px;
      .title {
        font-size: 30px;
        color: #fff;
        margin-bottom: 40px;
      }
      .login-ruleForm {
        ::v-deep .el-form-item__label {
          color: #fff;
          padding: 0;
          padding-bottom: 5px;
        }
        ::v-deep .el-input__inner {
          // height: 47px;
          background-color: #133b9a;
          border-color: transparent;
          &:hover {
            border-color: #2776be;
          }
        }
        ::v-deep .el-input {
          input {
            color: #fff !important;
            height: 41px;
            line-height: 41px;
          }
          .el-input__prefix {
            .el-input__icon {
              font-size: 18px;
              line-height: 41px;
            }
          }
        }
        ::v-deep input:-webkit-autofill {
          background: #133b9a !important;
          color: #fff;
          -webkit-box-shadow: 0 0 0px 1000px #133b9a inset !important;
          -webkit-text-fill-color: #fff;
        }
        ::v-deep .el-input__inner::placeholder {
          color: #ccc;
        }
      }
      .subBtn {
        margin-top: 30px;
        .el-button {
          width: 100%;
          height: 45px;
          background-color: #195fff;
          border-color: #195fff;
          &:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
        }
      }
    }
  }
}
</style>
